<template>
  <div class="notification" :style="notifStyle">
    <header>
      <span>{{item.createUserName||'-'}} 上报</span>
      <i class="el-icon-close" @click="onClose"></i>
    </header>
    <main>
      <img :src="mes_classCode1" alt>
      <div class="main-right">
        <div>
          <div class="title">{{item.eventName||'-'}}</div>
          <div class="content">{{item.eventDetail||'-'}}</div>
        </div>
        <div class="btn-box">
          <el-button type="primary" @click="onClick(item)" size="small">查 看</el-button>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import {} from "../../config/api";
import mes_classCode1 from "../../assets/incidentCenter/mes_classCode1.png";

export default {
  props: ["type", "item", "index"],
  data() {
    return {
      mes_classCode1,
      notifStyle:''
    };
  },
  mounted() {
      this.initStyle();
  },
  destroyed() {},
  methods: {
    onClick(item) {
      this.$emit("onClick", {id:1});
    },
    initStyle(index) {
        setTimeout(()=>{
            this.notifStyle=`z-index:${2000 - (this.index||0)};left:20px`;
        },0);
    },
    onClose() {
      this.$emit("closeCallback");
    }
  }
};
</script>
<style lang = "scss" scoped>
.notification {
  z-index: 2000;
  background-color: #fff;
  left: -400px;
  bottom: 10px;
  border-radius: 8px;
  width: 495px;
  transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s,
    bottom 0.3s;
  box-sizing: border-box;
  box-shadow: 4px 4px 4px #ddd;
  position: fixed;
  overflow: hidden;
}
header {
  color: #fff;
  background-color: #435dc5;
  height: 34px;
  padding-left: 15px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  span {
    flex: 1;
  }
  i {
    padding: 5px;
    cursor: pointer;
  }
}
main {
  display: flex;
  align-items: flex-start;
  padding: 20px 20px 15px;
  line-height: 1.8;
  height: 166px;
  box-sizing: border-box;
  > img {
    width: 34px;
    margin-right: 20px;
  }
  > .main-right {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .title {
    font-size: 16px;
    color: #435dc5;
    margin-bottom: 10px;
  }
  .content {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .btn-box {
    text-align: right;
  }
}
</style>